<template>
<div class="u-box">
  <div class="search-box">
    <el-select v-model="type" size="medium" placeholder="请选择" @change="changeType()">
      <el-option v-for="(k, v) in dims.STAR_COMMENT_TARGET" :key="v" :label="k" :value="v">
      </el-option>
    </el-select>
  </div>
  <div v-if="dataList && dataList.length > 0" class="notes-box">
    <div v-for="(item, index) in dataList" class="note-box" :key="index" @click="clickRsr(item.resourceId)">
      <div class="img-box">
        <img :src="item.img" />
        <p>{{ item.resourceName }}</p>
      </div>
      <div class="tags-box">
        <el-tag effect="plain" type="primary" v-for="(k, v) in dims.TAGS" :key="v" v-if="parseTag(item.tags, v)">
          {{ k }}
        </el-tag>
      </div>
      <div class="status-box">
        <el-tag :type="getTagType(item.status)">
          {{ dims.DEAL_WITH_STATUS[item.status] }}
          <svg-icon :icon-class="getIcon(item.status)"></svg-icon>
        </el-tag>
      </div>
      <div class="create-time-box">
        <span> {{ item.collectTime }}</span>
      </div>
      <div class="del-box" @click="del(item.id)">
        <svg-icon icon-class="delete_5"></svg-icon>
      </div>
    </div>
  </div>
  <div class="notes-box" v-else>
    <div class="c-no-data">
      暂无数据
    </div>
  </div>
</div>
</template>

<script>
import clickFunc from '@/mixins/rsr-slot';
import tagFunc from '@/mixins/tag';
export default {
  name: 'u-star',
  mixins: [clickFunc, tagFunc],
  data() {
    return {
      dims: sa.$sys.getCurd(),
      type: '1',
      dataList: [],
    }
  },
  components: {},
  created: function () {
    this.f5()
  },
  methods: {
    // 获取收藏
    f5() {
      sa.ajax('/my/collections/' + this.type, function (res) {
        this.dataList = res.data;
      }.bind(this), {
        type: 'get'
      });
    },

    // 改变类型
    changeType() {
      this.f5()
    },

    // 获取第一个字
    getIcon(code) {
      return code === 0 ? 'indeterminate_circle_1' : code === 1 ? 'checkbox_circle' : 'close_circle'
    },
    // 获取标签样式
    getTagType(status) {
      if (status === -1) {
        return 'info'
      } else if (status === 0) {
        return 'primary'
      } else if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },
    // 删除
    del(id) {
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax("/collections/delete", {
          id: id
        }, function (_res) {
          this.f5();
        }.bind(this), {
          type: 'get'
        })
      }.bind(this));
    },
  },
}
</script>

<style scoped>
img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.u-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  height: 10%;
  width: 100%;
}

.notes-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 90%;
  width: 100%;
  border-radius: 5px;
  overflow: auto;
  padding: 1px;
}

.note-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px 0px;
  padding: 0px 5px;

  &:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 2px 1px #f1f1f1;
    transform: translate(0%, 2%);
  }
}

.img-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  height: 36px;
  margin: 5px 0px;
  padding-right: 5px;
}

.tags-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;

  .el-tag {
    margin: 2px 5px;
  }
}

.status-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
}

.create-time-box {
  display: flex;
  align-items: center;
  width: 18%;
}

.del-box {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 2%;
  color: red;
}

.c-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: #aaaaaa;
}
</style>
